<template>
    <div>
      <!-- home布局 -->
      <el-container class="box">
        <!-- 顶部导航 -->
        <el-header>
          <div class="head-left" @click="welcom">
            <div class="head-img"><img src="~@/assets/logo.png"></div>
            <h1>电商管理平台</h1>
          </div>
          <div class="head-conter"></div>
          <div class="head-right">
            <el-button type="info" plain @click="exit">退出</el-button>
          </div>
        </el-header>

        <el-container>
          <!-- 左侧导航 -->
          <el-aside  :class="{'forwidch':colmenu}" class="asi">
            <!-- 收缩按钮 -->
            <div class="col" @click="col">
              <span>|||</span>
            </div>
            <el-menu
              
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b" unique-opened :collapse='colmenu'>
              <!-- 一级菜单 -->
              <el-submenu :index="item.id +''" v-for = 'item in leftdata' :key ='item.id' >
                <!-- 一级 -->
                <template slot="title" >
                  <i class="el-icon-location"></i>
                  <span>{{item.authName}}</span>
                </template>
                <!-- 二级菜单 -->
                <el-menu-item-group v-for = 'initem in item.children' :key ="initem.id" > 
                  <el-menu-item :index="initem.id + ''" @click="gopage(initem.id)">{{initem.authName}}</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              
            </el-menu>
          </el-aside>
          <!-- 内容区 -->
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
          leftdata:[],
          colmenu:false,
          
        };
    },
    created() {
      this.getHomeData()
    },
    mounted() {
      
    },
    methods: {
      exit(){
        this.$router.push('/Login')
      },
      async getHomeData(){
        const {data:ref} =await this.$http.get('menus')
        console.log(ref);
        if(ref.meta.status != 200) return this.$message('获取用户列表失败');
        this.leftdata = ref.data
      },
      col(){
        this.colmenu =!this.colmenu;
        // if(!this.colmenu) return setTimeout(()=>{return this.menuw = '200px'},200) ;
        // this.menuw ='auto'
      },
      welcom(){
        this.$router.push('/welcome')
      },
      gopage(id){
        if(id == 110){//用户列表
          return this.$router.push({path:'/UserList'},onComplete => {},onAbort => {})
          }else if(id == 112) {//权限列表
            return this.$router.push({path:'/Power'},onComplete => {},onAbort => {})
            }else if(id == 111) {//角色列表
            return this.$router.push({path:'/Roles'},onComplete => {},onAbort => {})
            }else if(id == 121) {//商品分类
            return this.$router.push({path:'/GoodsClass'},onComplete => {},onAbort => {})
            }else if(id == 115) {//商品分类
            return this.$router.push({path:'/GoodsParam'},onComplete => {},onAbort => {})
            }else if(id == 104) {//商品分类
            return this.$router.push({path:'/GoodsList'},onComplete => {},onAbort => {})
            }else if(id == 107) {//商品分类
            return this.$router.push({path:'/Order'},onComplete => {},onAbort => {})
            }else if(id == 146) {//商品分类
            return this.$router.push({path:'/DataList'},onComplete => {},onAbort => {})
            }
        
      }
      
    }
};
</script>

<style scoped>
.el-header{
  background-color: #333;
  height: 80px !important;
  display: flex;
  justify-content:space-between;
}
.el-aside{
  background-color: #666;
  height: 100%;
}
.asi{
  width: 200px !important;
}
.box{
  height: 100vh;
}
.el-main{
  background-color: #e7e7e7;
}
.head-left{
  display: flex;
  align-items: center;
  color: #fff;
}
.head-img{
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 4px solid #fff;
  margin-right: 10px;
}
.head-img img{
  width: 100%;
}
.head-right{
  display: flex;
  align-items: center;
}
.el-menu{
  border-right: none;
}
.col{
  width: 100%;
  height: 30px;
  background-color: #999;
  text-align: center;
  line-height: 30px;
  color: #fff;
  cursor:pointer
}
.forwidch{
  width: auto !important;
  transition: 1s;

}
</style>
